HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript-Objektreferenz

FENSTERNAME.document.images[ ] / BILDNAME

 Allgemeines zur Verwendung
 Eigenschaften
 Methoden

Allgemeines zur Verwendung

Mit dem Objekt FENSTERNAME.document.images[ ] / BILDNAME haben Sie Zugriff auf alle Grafiken, die in eine HTML-Datei eingebunden sind. Dabei können Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.

Eine Objektinstanz des Grafik-Objekts wird automatisch erzeugt, wenn der WWW-Browser mindestens eine  Grafik in der HTML-Datei vorfindet. Daneben können Sie für dynamisch einzubindende Grafiken selbst neue Instanzen des Grafik-Objekts definieren.

Vorhandene Grafiken ansprechen

Sie können Grafiken, die mit HTML eingebunden sind, mit JavaScript ansprechen.

Schema 1 / Beispiel 1:

FENSTERNAME.document.images[#].Eigenschaft/Methode()
var Grafikdatei = window.document.images[4].src;

Schema 2 / Beispiel 2:

FENSTERNAME.document.BILDNAME.Eigenschaft/Methode()
var Grafikdatei = window.document.HomeButton.src;

Erläuterung:

In eine HTML-Datei eingebundene Grafik können Sie auf zwei Arten ansprechen:

Beachten Sie:

Zu den Fensternamen lesen Sie den Abschnitt  Allgemeines zur Verwendung des window-Objekts. Bei Verwendung von Frames lesen Sie auch den Abschnitt  Allgemeines zur Verwendung des Frame-Objekts.

Neue Objektinstanz erzeugen / Grafik dynamisch einbinden

 Sie können neue Instanzen des Grafik-Objekts definieren. Mit deren Hilfe können Sie Grafiken mit JavaScript anzeigen, die zuvor noch nicht in der HTML-Datei referenziert waren.

Beispiel:

Zweitbild = new Image();
Zweitbild.src = "blau.gif";
document.images[0].src = Zweitbild.src;;

Erläuterung:

Eine neue Instanz des Grafik-Objekts speichern Sie in einem selbst vergebenen Objektnamen, im obigen Beispiel in dem Namen Zweitbild. Hinter dem Namen folgt ein Istgleichzeichen. Dahinter folgt das reservierte Wort new und der Aufruf der Objektfunktion Image().

Anschließend können Sie mit der neu erzeugten Instanz arbeiten. So können Sie der Instanz über die Objekteigenschaft src eine Grafikdatei zuordnen, im Beispiel die Datei "blau.gif". Die dritte Zeile im obigen Beispiel zeigt eine Anweisung, wie Sie dynamisch eine vorhandene Grafik ersetzen können. Angenommen, in der HTML-Datei wurde als erste Grafik in der Datei mit <img src="rot.gif"> ein rotes Bild eingebunden. Mit Hilfe von JavaScript können Sie nun, beispielsweise in Abhängigkeit vom Klicken auf einen Verweis, dieses rote Bild durch ein anderes, blaues Bild ersetzen.

Beachten Sie:

Ein Anwendungsbeispiel für den Einsatz dynamischer Grafiken finden Sie in diesem Dokument:  dynamische grafische Buttons.

Eigenschaften

Eigenschaften von Grafiken, die in HTML referenziert wurden, können Sie nur lesen, nicht ändern. Eine Anweisung wie window.document.images[0]="blau.gif" ist falsch. Sie können Eigenschaften von HTML-definierten Grafiken allerdings gleichartige Eigenschaften von eigenen Grafikobjekten zuweisen. Eine Anweisung wie window.document.images[0].src=Neubild.src ist also erlaubt, wenn zuvor eine neue Objektinstanz Neubild erzeugt wurde. Eigenschaften einer neuen Instanz des Grafik-Objekts können Sie jederzeit ändern.

FENSTERNAME.document.images[#].border
FENSTERNAME.document.BILDNAME.border
Lesen Ändern
Der  Rahmen um eine Grafik. Mit var Rahmen = window.document.images[3].border beispielsweise speichern Sie die Dicke des definierten Rahmens um eine Grafik in einer Variablen.

FENSTERNAME.document.images[#].complete
FENSTERNAME.document.BILDNAME.complete
Lesen Ändern
Gibt an, ob eine Grafik vollständig eingelesen ist oder nicht. Mit alert("Zustand von Grafik 1: " + window.document.images[0].complete) können Sie beispielsweise in einem Meldungsfenster ausgeben, ob eine Grafik vollständig geladen ist oder nicht.

FENSTERNAME.document.images[#].height
FENSTERNAME.document.BILDNAME.height
Lesen Ändern
Die  Höhe einer Grafik. Mit var Hoehe = window.document.images[1].height beispielsweise speichern Sie die in der zweiten Grafik definierte Höhe in einer Variablen.

FENSTERNAME.document.images[#].hspace
FENSTERNAME.document.BILDNAME.hspace
Lesen Ändern
Der  horizontale Abstand einer Grafik zu ihrer Umgebung. Mit var HAbstand = window.document.images[0].hspace beispielsweise speichern Sie den in der ersten Grafik definierten horizontalen Abstand in einer Variablen.

FENSTERNAME.document.images.length
Lesen Ändern
Ermittelt die Anzahl in einer HTML-Datei referenzierten Grafiken. Mit alert("Diese Datei enthält isg. " + window.document.images.length + " Grafiken") geben Sie beispielsweise die Anzahl der referenzierten Grafiken in einem Meldungsfenster aus.

FENSTERNAME.document.images[#].lowsrc
FENSTERNAME.document.BILDNAME.lowsrc
Lesen Ändern
Die  niedriger auflösende Grafikdatei bei Grafiken in zwei Versionen. Mit var Schlechtbild = window.document.images[3].lowsrc beispielsweise speichern Sie die Angabe zu der in der vierten Grafik mit lowsrc= definierten Datei in einer Variablen.

FENSTERNAME.document.images[#].name
FENSTERNAME.document.BILDNAME.name
Lesen Ändern
Der  Name einer Grafik. Mit var Bildname = window.document.images[2].name beispielsweise speichern den vergebenen Namen der dritten Grafik mit lowsrc= definierten Datei in einer Variablen.

FENSTERNAME.document.images[#].prototype
FENSTERNAME.document.BILDNAME.prototype
Lesen Ändern
Erlaubt die Definition eigener Eigenschaften fⁿr eine Grafik. Ein Beispiel war leider nicht auftreibbar.

FENSTERNAME.document.images[#].src
FENSTERNAME.document.BILDNAME.src
Lesen Ändern
Die  Angabe zur Grafikdatei. Mit var Grafik = window.document.images[0].src beispielsweise speichern den Namen der ersten im der Datei referenzierten Grafikdatei in einer Variablen.

FENSTERNAME.document.images[#].vspace
FENSTERNAME.document.BILDNAME.vspace
Lesen Ändern
Der  vertikale Abstand einer Grafik zu ihrer Umgebung. Mit var VAbstand = window.document.images[0].height beispielsweise speichern Sie den in der ersten Grafik definierten vertikalen Abstand in einer Variablen.

FENSTERNAME.document.images[#].width
FENSTERNAME.document.BILDNAME.width
Lesen Ändern
Die  Breite einer Grafik. Mit var Breite = window.document.images[1].width beispielsweise speichern Sie die in der zweiten Grafik definierte Breite in einer Variablen.

Methoden

FENSTERNAME.document.images[ ] / BILDNAME hat keine eigenen Methoden.

Blättern:
FENSTERNAME.document.forms[ ] / FORMULARNAME.elements[ ] / ELEMENTNAME     FENSTERNAME.document.layers[ ] / LAYERNAME

HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript-Objektreferenz

© 1997  Stefan Münz, muenz@compuserve.com